<template>
	<div class="content">
		<!-- <div class="bg-box"></div> -->
		<div class="img-box" v-if='userInfo.headerPic'>
			<img id="imgRoat" :src="userInfo.headerPic" alt="">
			<p>身份证照片</p>
		</div>
		<!-- <div class="img-box">
			<img id="imgRoat" :src="urltest" alt="">
			<p>身份证照片</p>
		</div> -->
		<div class="text">
			<div class="title">
				核验信息
			</div>
			<div class="cell">
				<span>姓名</span>
				<span>{{ userInfo.encryptName || hideStrForName('测试人员') }}</span>
			</div>
			<div class="cell">
				<span>身份证号</span>
				<span>{{ userInfo.encryptIdCard || hideStrForName('3303271568625488') }}</span>
			</div>
			<div class="cell">
				<span>核验时间</span>
				<span>{{ dateTime }}</span>
			</div>
		</div>
		<vue-esign ref="esign" :width="400" :height="260" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor"
			:bgColor.sync="bgColor" />
		<div class="btn-group">
			<button @click='cancel' class="border">取消</button>
			<button @click='handleReset' class="border">重写</button>
			<button type='primary' @click='handleGenerate' class="background">提交签名</button>
		</div>
	</div>
</template>

<script>
import {
	mapState,
	mapMutations,
	mapActions
} from 'vuex'
import {
	hideStrForName, hideStrForIdCard
} from "@/utils/index";
import { imageRotate } from '@/common/rotate'
import dayjs from 'dayjs';
export default {
	data() {
		return {
			lineWidth: 6,
			lineColor: '#000000',
			bgColor: '#f9f9f9',
			resultImg: '',
			isCrop: false,
			urltest: '',
			dateTime:'',
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	mounted() {
    this.freshLoginStatusTimer()
		// this.urltest='http://170.200.5.60:9999/%E4%BD%99%E5%BE%B7%E6%98%8E/1.png'
    if(this.userInfo.headerPic){
      this.imageToBase64()
    }

		this.dateTime=dayjs().format('YYYY-MM-DD HH:mm:ss')

	},
	methods: {
		dayjs,
		...mapMutations(['setUserInfo']),
    ...mapActions(['freshLoginStatusTimer']),
		hideStrForName, hideStrForIdCard, imageRotate,
		submitData() {
			this.setUserInfo({
				// result: 'success',
				dateTime:this.dateTime
			})
			this.$router.push({
				path: '/record/result'
			})

		},
		cancel() {
			this.$router.push({
				path: '/index'
			})
		},
		//清空
		handleReset() {
			this.$refs.esign.reset()
		},
		//提交签名
		handleGenerate() {
			this.$refs.esign.generate().then(res => {
				this.resultImg = res
				this.setUserInfo({ electronicSignature: res })
				this.submitData()
			}).catch(err => {
				alert(err) // 画布没有签字时会执行这里 'Not Signned'
			})
		},
		imageToBase64() {
			let img = document.querySelector('#imgRoat')
			img.crossOrigin = 'anonymous';
			img.onload = async () => {
				const base64 = imageRotate(img)
				this.setUserInfo({ verificationPhoto: base64 })
				// if(this.userInfo.result=='fail'){
				// 	this.submitData()
				// }
			}
		},
	}
};
</script>
<style lang="less" scoped>
.content {
	padding: 0 15px;
	height: 589px;

	.bg-box {
		background: #327fff;
		width: 100vw;
		height: 45vh;
		position: absolute;
		top: 0px;
		left: 0px;
		border-bottom-right-radius: 50px;
		border-bottom-left-radius: 50px;
		z-index: 0;
	}

	.img-box {
		text-align: center;
		position: relative;
		z-index: 1;
		margin-bottom: 20px;
		height: 120px;
		// margin-top: 20px;

		img {
			width: 80px;
			height: 100px;
			background: #000;
		}

		p {
			color: #fff;
			margin: 0;
		}
	}

	.text {
		position: relative;
		z-index: 1;
		background: #fff;
		width: 90%;
		margin: 0 auto;
		border-radius: 15px;
		padding: 20px;
		 margin-bottom: 50px;
		 //min-height: 150px;

		.title {
			font-size: 22px;
			padding-bottom: 10px;
			margin-bottom: 20px;
			// border-bottom: 1px solid #000;
			color: #000;
		}

		.cell {
			margin: 20px 0px;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			align-items: center;
			justify-content: space-between;

			&:last-child {
				margin-bottom: 0;
			}

			span {
				font-size: 16px;
			}
		}

	}

	.btn-group {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translate(-50%, 0%);
		width: 90%;
	}

	button {
		width: 100px;
		background: none;
		border: 1px solid #555555;
		height: 36px;
		line-height: 36px;
		border-radius: 5px;
	}

	.background {
		width: 130px;
		background: #327fff;
		color: #fff;
		border-color: transparent;
	}
}</style>